<template>
	<view class="dingdanzhuangtai">
		<view class="bootm">
			<view class="xiugai " v-if="quxiaodingdan">
				取消订单
			</view>
			<view class="xiugai" v-if="xiugaidizhi">
				修改地址
			</view>
			<view class="xiugai" v-if="shanchudingdan">
				删除订单
			</view>
			<view class="xiugai" v-if="cuifahuo">
				催发货
			</view>
			<view class="xiugai " v-if="pinjia" @click="handleSubmit">
				评价
			</view>
			<view class="xiugai ss dd" v-if="lijizhifu">
				立即支付
			</view>
			<view class="xiugai ss" v-if="jiarugouwuche">
				加入购物车
			</view>
			<view class="xiugai ss" v-if="querenshouhuo">
				确认收货
			</view>
			<view class="xiugai " v-if="shouhou">
				售后
			</view>
			<u-popup :show="show" :round="40" mode="bottom" :closeOnClickOverlay="false">
				<view class="Pop-Frame-background">
					<view class="Pop-Frame-evaluate-background">
						<view class="fictitious"></view>
						<text class="evaluate-txt">评价</text>
						<i class="close-icon" @click="close"></i>
					</view>
					<view class="Product-evaluation-background">
						<view class="Product-evaluation">
							<view class="Product-images-background">
								<!-- 放头像 -->
								<view class="Product-images">
									<image :src="img" mode=""></image>
								</view>
								<text class="Product-Name">{{bt}}</text>
							</view>
							<view class="Number-of-evaluation-stars">
								<view class="score-background">
									<text class="score-txt">评分</text>
									<u-rate :count="count" :size="50" v-model="value"></u-rate>
								</view>
							</view>
						</view>
						<!-- 评价内容 -->
						<u-textarea v-model="value02" placeholder="多多描述商品和使用感受,能帮助到更多感兴趣的小伙伴哦~" :maxlength="300"
							:height="200" class="Evaluation-box"></u-textarea>
					</view>
					<view class="Submit-background">
						<text :class="['Submit', { 'Submit-disabled': isSubmitDisabled }]" :disabled="isSubmitDisabled"
							@click="handleSubmit02">提交评价</text>
					</view>
				</view>
			</u-popup>
			<u-popup :show="showSecondPopup" @close="close" :closeOnClickOverlay="true">
				<view class="Evaluation-successful-background">
					<view class="Submitted-evaluation-background">
						<view class="fictitious-02"></view>
						<view class="Submitted-evaluation-txt-background">
							<i class="Submitted-evaluation-txt-icon"></i>
							<text class="Submitted-evaluation-txt">已提交评价</text>
						</view>
						<i class="Wrong-number" @click="close"></i>
					</view>
					<text class="Purchase-experience-text">谢谢你的评价,晒出你的购买体验吧</text>
					<view class="Specific-products-background">
						<view class="Specific-product-images">
							<image :src="img" mode=""></image>
						</view>
						<view class="Specific-product-details">
							<view class="Specific-product-description-and-name">{{bt}}</view>
							<text class="Product-remarks"></text>
							<view class="Sunbathing-background">
								<view class=""></view>
								<view class="Sun-order-button">晒单</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				shanchudingdan: false,
				xiugaidizhi: false,
				lijizhifu: false,
				jiarugouwuche: false,
				querenshouhuo: false,
				daifahuo: false,
				cuifahuo: false,
				shouhou: false,
				quxiaodingdan: false,
				pinjia: false,
				show: false,
				showSecondPopup: false,
				count: 5,
				value: 0,
				value02: '',
				reviewsVo: {
					rating: 0,
					reviewText: '',
				},

			}
		},
		props: ["setName","img","bt"],
		onLaunch() {
			this.zuj();
			this.getName();
		},
		computed: {
			isSubmitDisabled() {
				return this.value < 1 || !this.value02.trim();
			},
		},
		methods: {
			close() {
				this.show = false;
				this.showSecondPopup = false
			},
		submitEvaluation() {
			this.show = true;
		},
		handleSubmit02() {
			if (!this.isSubmitDisabled) {
				this.reviewsVo.rating=this.value;
				this.reviewsVo.reviewText=this.value02
				this.request("/productReviews/insertProductReviews", "post", this.reviewsVo)
					.then((res) => {
						console.log(res);
						this.asd = res.data;
					})
					.catch((err) => {
						console.log(err);
					});
			}
			this.show = false;
			this.showSecondPopup =true;
		},
		handleSubmit(){
			this.show = true;
		    this.showSecondPopup =false;
		},
			getName() {
				console.log(this.setName);
			},
			zuj() {
				if (this.setName == "待发货") {
					console.log();
					this.shanchudingdan = false;
					this.lijizhifu = false;
					this.jiarugouwuche = false;
					this.querenshouhuo = false;
					this.daifahuo = false;
					this.cuifahuo = false;
					this.shouhou = false;
					this.pinjia = false;
					this.quxiaodingdan = true;
					this.xiugaidizhi = true;
				} else if (this.setName == "待处理") {
					this.shanchudingdan = false;
					this.jiarugouwuche = false;
					this.querenshouhuo = false;
					this.daifahuo = false;
					this.cuifahuo = false;
					this.shouhou = false;
					this.pinjia = false;
					this.xiugaidizhi = false;
					this.quxiaodingdan = true;
					this.lijizhifu = true;
				} else if (this.setName == "已发货") {
					this.shanchudingdan = false;
					this.jiarugouwuche = false;
					this.daifahuo = false;
					this.cuifahuo = false;
					this.shouhou = false;
					this.pinjia = false;
					this.quxiaodingdan = false;
					this.lijizhifu = false;
					this.xiugaidizhi = true;
					this.querenshouhuo = true;
				} else if (this.setName == "已取消") {

					this.lijizhifu = false;

					this.querenshouhuo = false;
					this.daifahuo = false;
					this.cuifahuo = false;
					this.shouhou = false;
					this.pinjia = false;
					this.quxiaodingdan = false;
					this.xiugaidizhi = false;
					this.shanchudingdan = true;
					this.jiarugouwuche = true;
				} else if (this.setName == "待评价") {
					this.shanchudingdan = false;
					this.lijizhifu = false;
					this.jiarugouwuche = false;
					this.querenshouhuo = false;
					this.daifahuo = false;
					this.cuifahuo = false;
					this.shouhou = false;
					this.quxiaodingdan = false;
					this.xiugaidizhi = false;
					this.pinjia = true;

				} else if (this.setName == "已评价") {
					this.lijizhifu = false;
					this.jiarugouwuche = false;
					this.querenshouhuo = false;
					this.daifahuo = false;
					this.cuifahuo = false;
					this.pinjia = false;
					this.quxiaodingdan = false;
					this.xiugaidizhi = false;
					this.shouhou = true;
					this.shanchudingdan = true;
				}
			}

		},
		watch: {
			setName(newVal) {
				this.zuj();
			}
		},
		mounted() {
			this.zuj();
			console.log(this.item)
		}

	}
</script>

<style>
	.dingdanzhuangtai {
		display: flex;
		justify-content: right;
	}

	.bootm {
		width: 60%;
		display: flex;
		justify-content: space-evenly;
	}

	.xiugai {
		text-align: center;
		border-radius: 32rpx;
		border: 1rpx solid rgb(181, 181, 181);
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.ss {
		background-color: rgb(255, 36, 66);
	}

	.dd {
		width: 250rpx;
	}
	.Pop-Frame-background {
		height: 1200rpx;
		background-color: #f6f6f6;
		border-radius: 40rpx;
	}
	.Pop-Frame-evaluate-background {
		width: 100%;
		height: 130rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.fictitious {
		width: 100rpx;
		height: 100rpx;
	}
	
	.evaluate-txt {
		font-size: 45rpx;
	}
	.Product-evaluation-background {
		width: 100%;
		height: 800rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
	}
	
	.Product-evaluation {
		width: 680rpx;
		height: 350rpx;
		margin: auto;
		border-bottom: 1rpx solid #f6f6f6;
	}
	.Product-images-background {
		width: 100%;
		height: 150rpx;
		display: flex;
	}
	
	.Product-images {
		width: 150rpx;
		height: 150rpx;
		border: 1px solid black;
	}
	.Product-images image{
		width: 150rpx;
		height: 150rpx;
	}
	
	.Product-Name {
		width: 450rpx;
		height: 70rpx;
		text-align: center;
		margin-left: 25rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 70rpx;
		/* border: 1px solid black; */
	}
	
	.Number-of-evaluation-stars {
		width: 100%;
		height: 100rpx;
		margin-top: 40rpx;
	}
	.score-background {
		width: 100%;
		height: 100rpx;
		display: flex;
	}
	
	.score-txt {
		font-size: 40rpx;
		line-height: 70rpx;
		margin: 20rpx;
	}
	.close-icon {
		width: 70rpx;
		height: 70rpx;
		margin-right: 20rpx;
		background-image: url("../../../static/Myimg/Exclamation mark.png");
		background-repeat: no-repeat;
		background-size: cover;
	}
	.Submit-background {
		width: 100%;
		height: 170rpx;
		background-color: #ffffff;
		margin-top: 80rpx;
		display: flex;
	}
	
	.Submit {
		display: block;
		width: 700rpx;
		height: 100rpx;
		background-color: #eb3e49;
		margin: 35rpx auto;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		color: white;
		font-size: 45rpx;
	}
	
	.Submit-disabled {
		background-color: #f1abb3;
		pointer-events: none;
	}
	
	.Evaluation-box {
		width: 650rpx;
		margin: auto;
		background-color: #f6f6f6;
	}
	
	.Evaluation-successful-background {
		height: 550rpx;
	}
	
	.Submitted-evaluation-background {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.Submitted-evaluation-txt-background {
		display: flex;
		align-items: center;
		width: 300rpx;
		height: 100rpx;
		text-align: center;
		font-size: 35rpx;
	}
	
	.Submitted-evaluation-txt-icon {
		width: 60rpx;
		height: 60rpx;
		background-image: url("../../../static/icon/Submitted.png");
		background-repeat: no-repeat;
		background-size: cover;
		margin-left: 50rpx;
	}
	
	.fictitious-02 {
		width: 100rpx;
		height: 100rpx;
	}
	
	.Submitted-evaluation-txt {
		margin-left: 15rpx;
	}
	
	.Wrong-number {
		width: 60rpx;
		height: 60rpx;
		background-image: url("../../../static/Myimg/Exclamation mark.png");
		background-repeat: no-repeat;
		background-size: cover;
		margin-right: 25rpx;
	}
	
	.Purchase-experience-text {
		display: block;
		text-align: center;
	}
	
	.Specific-products-background {
		width: 100%;
		height: 350rpx;
		background-color: #f6f6f6;
		margin-top: 25rpx;
		display: flex;
		align-items: center;
	}
	
	.Specific-product-images {
		width: 300rpx;
		height: 300rpx;
		margin-left: 30rpx;
	}
	
	.Specific-product-details {
		width: 490rpx;
		height: 300rpx;
	}
	.Specific-product-images image{
		width: 300rpx;
		height: 300rpx;
	}
	
	.Specific-product-description-and-name,
	.Product-remarks {
		width: 420rpx;
		height: 80rpx;
		margin: auto;
		line-height: 80rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 70rpx;
	}
	
	.Product-remarks {
		display: block;
		width: 240rpx;
		margin-left: 13rpx;
		color: #ccc;
	}
	
	.Sunbathing-background {
		width: 100%;
		height: 130rpx;
		margin-left: 13rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.Sun-order-button {
		width: 150rpx;
		height: 80rpx;
		border: 1rpx solid #ccc;
		border-radius: 45rpx;
		margin-right: 30rpx;
		text-align: center;
		line-height: 80rpx;
		margin-top: 20rpx;
	}
</style>